<template>
  <el-row :gutter="0">
    <el-col :span="16">
      <div style="display: flex;align-items: center;">
        <img src="@/assets/logo.png" width="54px" style="display:inline;margin:2px 0 0 0;padding:0 10px 0 0" />
        <h1 style="display:inline;font-size:28px;font-weight:lighter;line-height:28px;padding:0;margin:10px 0 0 0" >OPREC</h1>
        <span style="opacity:0.75;transform:scale(0.75);font-size:12px;font-weight:bolder;margin:-10px 0 0 -1px">4CDAPP</span>
      </div>
    </el-col>
    <el-col :span="9" v-if="false">
      <div class="time-indicator">
        <el-button
          type="primary"
          round
          v-if="!showUTC"
          @click="showUTC = !showUTC"
          >{{ timeStr }}</el-button
        >
        <el-button
          type="danger"
          round
          v-if="showUTC"
          @click="showUTC = !showUTC"
          >{{ timeStrUTC }}</el-button
        >
      </div>
    </el-col>
    <el-col :span="8">
      <div class="login-indicator">
        <div v-if="$store.state.login.status != 0">
          <el-badge is-dot type="info">
            <el-button round plain type="info" @click="$emit('login')">
              <i class="el-icon-user"></i>
              未登录
            </el-button>
          </el-badge>
        </div>
        <div v-if="$store.state.login.status === 0">
          <el-badge is-dot type="success">
            <el-button round plain type="success" @click="$emit('login')">
              <i class="el-icon-user-solid"></i>
              {{ $store.state.login.userbase.name }}
            </el-button>
          </el-badge>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      timeStr: "",
      timeStrUTC: "",
      showUTC: true,
    };
  },
  methods: {
    setTimeStr() {
      let that = this;
      setInterval(function () {
        let d1 = new Date();
        let d2 = "";
        let d3 = "";
        //PEK
        d2 = d2 + d1.getFullYear() + "/";
        d2 = d2 + (d1.getMonth() + 1) + "/";
        d2 = d2 + d1.getDate() + " ";
        if (d1.getHours() < 10) d2 = d2 + "0";
        d2 = d2 + d1.getHours() + ":";
        if (d1.getMinutes() < 10) d2 = d2 + "0";
        d2 = d2 + d1.getMinutes() + ":";
        if (d1.getSeconds() < 10) d2 = d2 + "0";
        d2 = d2 + d1.getSeconds() + " PEK";
        that.timeStr = d2;
        //UTC
        d3 = d3 + d1.getUTCFullYear() + "/";
        d3 = d3 + (d1.getUTCMonth() + 1) + "/";
        d3 = d3 + d1.getUTCDate() + " ";
        if (d1.getUTCHours() < 10) d3 = d3 + "0";
        d3 = d3 + d1.getUTCHours() + ":";
        if (d1.getUTCMinutes() < 10) d3 = d3 + "0";
        d3 = d3 + d1.getUTCMinutes() + ":";
        if (d1.getUTCSeconds() < 10) d3 = d3 + "0";
        d3 = d3 + d1.getUTCSeconds() + " UTC";
        that.timeStrUTC = d3;
      }, 500);
    },
  },
  mounted() {
    this.setTimeStr();
  },
};
</script>

<style scoped>
.login-indicator {
  text-align: right;
  padding-top: 10px;
}
.time-indicator {
  text-align: center;
  padding-top: 10px;
}
</style>